<template>
  <div>
    <!-- 数据添加按钮 -->
    <el-card>
      <div class="head">
        <el-button type='primary' @click="dialogAdd = true" style="font-size: large;">+</el-button>
        <el-input v-model="SalaryPage.keyword" style="width:200px; margin:0 1vw 0 1vw;height: 32px;" />
        <el-button @click="getDepSalary()">搜索</el-button>
      </div>

      <el-table :data="salaryList">
        <el-table-column label="ID" type="index" />
        <el-table-column label="薪资主题" prop="name">
          <template v-slot="scope">
            <el-link @click="_this.$router.push({ name: 'salaryDetail', params: { ...scope.row } })" type="primary">
              {{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="考勤日期" prop="attendance" />
        <el-table-column label="创建日期" prop="salary_start" />
        <el-table-column label="发放人数" prop="grant_num" />
        <el-table-column label="创建人" prop="create_people" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" :size="large" @click="delSalary(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div>
      <el-pagination v-model:currentPage="SalaryPage.page" v-model:page-size="SalaryPage.pagesize"
        :page-sizes="[5, 10, 15, 20]" :small="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


  </div>
  <el-dialog v-model="dialogAdd" title="创建工资单" :draggable="true">
    <el-form :model="salaryForm" label-width="120px">
      <el-form-item label="薪资主题">
        <el-input v-model="salaryForm.name" />
      </el-form-item>

      <el-form-item label="考勤月份">
        <el-col :span="11">
          <el-date-picker v-model="salaryForm.attendance" type="date" placeholder="Pick a date" style="width: 100%"
            format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-col>
      </el-form-item>
      <el-form-item label="始发月份">
        <el-col :span="11">
          <el-date-picker v-model="salaryForm.salary_start" type="date" placeholder="Pick a date" style="width: 100%"
            format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-col>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="salaryForm.department" placeholder="选择部门">
          <el-option v-for="item in delList" :label="item.name" :value="item.id" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance, onUnmounted } from 'vue'
const dialogAdd = ref(false)
const delList = ref([])  //部门列表
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
const salaryList = ref([])
const total = ref(0)
const SalaryPage = reactive({    // 分页信息
  page: 1,
  pagesize: 10,
  keyword: "",
})
// 添加工资单form
const salaryForm = reactive({})
onUnmounted(() => {

})

const delSalary = async (id) => {
  const res = await _this.$API.salary.salary.del.delete({ id: id })
  getDepSalary()
}

// 添加工资单
const onSubmit = async () => {
  var userInfo = _this.$TOOL.data.get("USER_INFO");
  salaryForm.create_people = userInfo.name
  const res = await _this.$API.salary.salary.add.post(salaryForm)
  dialogAdd.value = false
  clear(salaryForm)
  getDepSalary()
}
// 清空reactive
const clear = (form) => {
  Object.keys(form).map(key => {
    delete form[key]
  })
}
// 获取部门列表
const getDepSalary = async () => {

  const res = await _this.$API.department.deparList.get()
  const resSalary = await _this.$API.salary.salary.list.get(SalaryPage)
  delList.value = res.data
  salaryList.value = resSalary.data
  total.value = resSalary.total

}
// 分页
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  SalaryPage.pagesize = val
  getDepSalary()

}
// 分页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  SalaryPage.page = val
  getDepSalary()
}

onMounted(() => {
  getDepSalary()
  _this.$TOOL.session.clear()
})

</script>

<style lang="scss">
.head {
  display: flex;
  height: 42px;
  line-height: 42px;
  position: relative;
  margin: 2vw;
}
</style>